<template>
	<div>
		<!-- <mj-empty>组件暂时还没做，请等待下一版本！</mj-empty> -->
		<mj-title type="h2" title="BackTop 返回顶部"></mj-title>
        <div class="page-desc">当页面内容冗长，需要快捷返回顶部时使用，一般放置在页面右下角位置。</div>

		<mj-title type="h2" title="基础用法"></mj-title>
        <div class="page-desc">向下滚动页面，灰色的按钮为默认效果。</div>
		<div class="input">
	        <mj-back-top></mj-back-top>
			<pre>
				<code class="language-html line-num bers">
				&lt;template>
					&lt;mj-back-top>&lt;/mj-back-top>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-title type="h2" title="自定义样式"></mj-title>
        <div class="page-desc">向下滚动页面，'UP'按钮为自定义效果。</div>
		<div class="input">
	        <mj-back-top :height="100" :bottom="200">
				<div class="top">UP</div>
			</mj-back-top>
			<pre>
				<code class="language-html line-num bers">
				&lt;template>
					&lt;mj-back-top :height="100" :bottom="200">
						&lt;div class="top">UP&lt;/div>
					&lt;/mj-back-top>
				&lt;/template>

				&lt;style scoped>
					.top {
						width: 40px;
						height: 40px;
						font-size: 20px;
						border-radius: 5px;
						background-color: rgb(242, 245, 246);
						box-shadow: rgb(0 0 0 / 12%) 0px 0px 6px;
						text-align: center;
						line-height: 40px;
						color: rgb(25, 137, 250);
					}
				&lt;/style>
				</code>
			</pre>
	    </div>

		<mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="BackTop 参数"></mj-title>
		<table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>height</td>
            		<td>页面滚动高度达到该值时才显示BackTop组件</td>
            		<td>Number</td>
            		<td>400</td>
            	</tr>
            	<tr>
            		<td>bottom</td>
            		<td>组件距离底部的距离</td>
            		<td>Number</td>
            		<td>30</td>
            	</tr>
            	<tr>
            		<td>right</td>
            		<td>组件距离右部的距离</td>
            		<td>Number</td>
            		<td>30</td>
            	</tr>
            	<tr>
            		<td>duration</td>
            		<td>滚动动画持续时间，单位 毫秒</td>
            		<td>Number</td>
            		<td>1000</td>
            	</tr>
            </tbody>
        </table>

		<mj-title type="h6" title="BackTop 事件"></mj-title>
		<table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>on-click</td>
            		<td>点击按钮时触发	</td>
            		<td>无</td>
            	</tr>
            </tbody>
        </table>

	</div>
</template>
<style scoped>
	.top{
        width: 40px;
		height: 40px;
		font-size: 20px;
		border-radius: 5px;
		background-color: rgb(242, 245, 246);
		box-shadow: rgb(0 0 0 / 12%) 0px 0px 6px;
		text-align: center;
		line-height: 40px;
		color: rgb(25, 137, 250);
    }
</style>